<template>
	<view class="pay-content">
		<view class="pay-price">
			<view class="price">
				<text>￥</text>
				<text>0.00</text>
			</view>
			<text>应付总额</text>
		</view>
		<view class="pay-way">
			<text>支付方式</text>
			<view class="wx" @tap="chooseWay(0)" :style="wayCode == 0 ? 'border:1rpx solid red' : 'border:1rpx solid transparent'">
				<image src="@/static/img/pay/wx.png" alt="">
				<text>微信支付</text>
			</view>
			<view class="zfb" @tap="chooseWay(1)" :style="wayCode == 1 ? 'border:1rpx solid red' : 'border:1rpx solid transparent'">
				<image src="@/static/img/pay/zfb.png" alt="">
				<text>支付宝</text>
			</view>
		</view>
		<view class="pay-row">
			<u-button type="default" shape="circle" class="pay-btn" @click="payHandle"
				hover-class="none" :loading="loading" >确认支付</u-button>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				wayCode:0,
				loading:false,
				newdata:{}
			}
		},
		onLoad(option) {
			console.log("option",JSON.parse(option.data));
			this.newdata=JSON.parse(option.data)
		},
		methods:{
			chooseWay(way){
				this.wayCode = way;
			},
			//立即支付按钮
			payHandle(){
				//0为微信支付 1为支付宝支付
				// this.loading = true;
				console.log(this.newdata);
				uni.navigateTo({
					url:'/pages/base/surepaycure?data='+JSON.stringify(this.newdata)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pay-content{
		padding: 0rpx 30rpx;
		.pay-price{
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 91rpx 0rpx 78rpx;
			.price{
				>text:first-of-type{
					font-size: 23px;
					color: #F4333C;
					font-weight: bold;
				}
				>text:last-of-type{
					font-size: 40px;
					color: #F4333C;
					font-weight: bold;
				}
			}
			>text{
				font-size: 13px;
				color: #333333;
			}
		}
		.pay-way{
			padding: 16rpx 24rpx 40rpx;
			background: #fff;
			border-radius: 14rpx;
			>text{
				color: #999999;
				font-size: 12px;
			}
			.wx,.zfb{
				height: 100rpx;
				background: #F5F5F5;
				border-radius: 14rpx;
				padding-left: 29rpx;
				display: flex;
				align-items: center;
				>text{
					font-size: 15px;
					font-weight: bold;
				}
			}
			.wx{
				margin-top: 21rpx;
				>image{
					width: 37rpx;
					height: 32rpx;
				}
				>text{
					margin-left: 12rpx;
				}
			}
			.zfb{
				margin-top: 30rpx;
				>image{
					width: 33rpx;
					height: 32rpx;
				}
				>text{
					margin-left: 17rpx;
				}
			}
		}
		.pay-row {
			width: calc(100vw - 60rpx);
			position: fixed;
			bottom: 30rpx;
			.pay-btn {
				background-color: #F4333C;
				color: #fff;
				height: 90rpx;
			}
		
			.u-hairline-border:after {
				border: none;
			}
		}
	}
</style>